<template>
	<view>
		<view class="cont">
			<good-item v-for="(item,index) in glist" :gdata="item" ></good-item>
			<view class="fixedd flex justify-center bg-fff padding-sm">
				<view v-for="(item,index) in tabArr" :key="index" @click="handleTab(item)" class="flex justify-center align-center">
					<view class="">{{item.name}}</view>
					<u-line v-if="index<tabArr.length-1" direction="col" length="15" margin="45upx"></u-line>
					
				</view>
				
			</view>
		</view>
	</view>
</template>   

<script>
	export default {
		data() {
			return {
				glist:[],
				page:0,
				tabArr:[
					{name:'分类',bcid:'',target:''},
					{name:'蛋糕',bcid:'1',target:'/pages/cake'},
					{name:'面包',bcid:'11',target:'/pages/bread'},
					{name:'小食',bcid:'6',target:'/pages/food'},
					{name:'购物车',bcid:'',target:'/pages/cart'}
				],
				bcid:1
			}
		},
		onLoad() {
		this.loadData()
		},
		onReachBottom() {
			this.loadData()
		
				
		},
		// 刷新页面
		onPullDownRefresh() {
			this.glist = []
			this.page = 0
			this.loadData()
		}
		,
		methods: {
			handleDatall(idx){
				uni.navigateTo({
					url:'/pages/detail/detail?idx='+idx   
				})
				
			},
			loadData(){
				let skip = this.page * 8
				let url = `/1.1/classes/goods?where={"bcid":${this.bcid}}&limit=8&skip=${skip}`
					this.$get(url).then(res=>{
						uni.stopPullDownRefresh()
						let {results} = res
							if(results.length){
								this.page++
								this.glist = [
									...this.glist,
									...res.results]
							return 
						}
						uni.showToast({
							title:"这回真没了",
							icom:'none'
						})
			})
			
		},
		handleTab(item){
			let {bcid,target} = item
			if(bcid){
				this.glist = []
				this.page = 0
				this.bcid = bcid
				this.loadData()
			}
		}
		}
	}
</script>

<style lang="scss">
.cont{
	display: flex;
	flex-wrap: wrap;
	padding: 15upx;
	justify-content: space-between;
}
.cake-item{
	width: 350upx;
	.poster{
		height: 350upx;
		background-color: #f5f5f5;
	}
	.fs-28{
		margin-top: 24upx;
	}
	.fs-16{
		margin: 14upx 0;
	}
	.fs-18{
		margin-bottom: 22upx;
	}
	
}
.fixedd{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2)
	}
</style>
